<template>
  <view class="content">
    <view class="contentbox" :style="'height:'+headHeight+'px;'" @click="goBack">
      <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
        <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
      </view>
    </view>
    <image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
    <view class="title">帮助说明</view>
    <view class="detail">
      欢迎使用夷陵城市停车！我们为您提供便捷、高效的智慧停车服务。以下是常见问题的解答，希望能帮助您更好地使用我们的服务。
    </view>
    <view class="name">一、新手入门指南</view>
    <view class="detailName">
      1.如何注册/登录？
    </view>
    <view class="detail">
      您可通过微信授权一键登录，或使用手机号+验证码注册。<br>
      温馨提示：首次使用手机号注册后，系统会自动为您创建账户，无需额外填写复杂信息。
    </view>
    <view class="detailName">
      2.如何绑定车牌？
    </view>
    <view class="detail">
      路径：【我的】->【我的车辆】->【添加车牌】。<br>
      支持同时绑定多辆车（如家庭用车、访客车辆等），最多可绑定5个车牌。<br>
      请准确填写车辆类型（小型车牌、小型新能源车牌、大型车牌、大型新能源车牌）和号码，否则可能影响计费。
    </view>
    <view class="detailName">
      3.如何支付与开通免密支付？
    </view>
    <view class="detail">
      路径：【首页】->【停车缴费】或【开通无感】。<br>
      我们支持微信支付、支付宝等多种方式。<br>
      开通无感支付后，停车费将在离场后自动扣款，实现“无感支付”，无需手动操作，快速离场。您可自行设置无感支付的扣款顺序和限额。
    </view>
    <view class="name">二、停车服务相关</view>
    <view class="detailName">
      1.如何查找附近停车场/空余车位？
    </view>
    <view class="detail">
      打开小程序【首页】->【找车位】，地图将自动定位并显示您周边的停车场。每个停车场图标会显示实时空余车位数和收费标准。您可使用搜索框，输入目的地名称或道路名精准查找。
    </view>
    <view class="detailName">
      2.停车场导航如何用？
    </view>
    <view class="detail">
      点击目标停车场，选择【导航】，即可跳转至您手机上的地图APP（如腾讯地图、高德地图）进行路线规划。
    </view>
    <view class="detailName">
      3.有哪几种入场方式？
    </view>
    <view class="detail">
      自动识别：车辆驶入支持夷陵城市停车的车场时，高清车牌识别摄像机会自动识别您的车牌并开始计时。<br>
      扫码入场：无牌车需扫描入口处的二维码完成入场。
    </view>
    <view class="detailName">
      4.有哪几种支付/离场方式？
    </view>
    <view class="detail">
      无感支付（推荐）：开通无感支付后，离场时道闸自动抬起，费用后续自动扣除。<br>
      先离场后付费：未开通无感支付，离场后可在小程序【欠费补缴】或【我的账单】中查询并手动支付欠费订单。<br>
      场内支付：通过小程序的【停车缴费】功能进行缴费，支付后在规定时间内离场。<br>
      出口扫码支付：可扫描一体机上的缴费二维码进行支付，支付后道闸自动抬杆放行。
    </view>
    <view class="name">三、费用与发票</view>
    <view class="detailName">
      1.收费标准如何查询？
    </view>
    <view class="detail">
      在每个停车场的详情页面均有明确的收费标准公示，请在停车前仔细阅读。
    </view>
    <view class="detailName">
      2.计费不准怎么办？
    </view>
    <view class="detail">
      请在【停车记录】中找到对应订单，选择【反馈问题】或直接联系在线客服。请提供您的车牌号、停车场名称、入场和离场时间以及相关问题描述，我们的客服会尽快核实处理
    </view>
    <view class="detailName">
      3.如何开具电子发票？
    </view>
    <view class="detail">
      路径：【我的】->【我的发票】。<br>
      支持单笔开具和多笔合并开具。<br>
      输入发票抬头和税号信息后，电子发票将发送至您指定的邮箱。<br>
      注意：发票申请一般在支付成功后进行，有效期为3-6个月，请及时开票。
    </view>
    <view class="name">四、账户信息修改</view>
    <view class="detailName">
      1.如何修改手机号或解绑车牌？
    </view>
    <view class="detail">
      路径：【我的】->【去绑定】<br>
      路径：【我的】->【车辆管理】，点击对应车牌进行【解绑】。<br>
      注：存在欠费订单时无法解绑。
    </view>
    <view class="name">五、常见问题（FAQ）</view>
    <view class="detailName">
      Q：为什么我已经离场，还在计费？
    </view>
    <view class="detail">
      A：请勿担心，通常是由于网络延迟，系统未及时更新离场状态。请稍等片刻刷新订单，或手动在【停车记录】中点击申诉-我已离场。如长时间未更新，请联系客服处理。
    </view>
    <view class="detailName">
      Q：收到补缴通知/欠费通知怎么办？
    </view>
    <view class="detail">
      A：请及时登录小程序，在【账单】或【消息中心】中查看详情并完成支付。长期欠费可能会影响您在该车场的信用记录和后续使用。
    </view>
    <view class="detailName">
      Q：车牌识别错误怎么办？
    </view>
    <view class="detail">
      A：如果您收到的账单信息（车牌号）与实际不符，请切勿支付。立即通过该订单的【申诉】入口或联系在线客服，提交正确车牌信息和现场照片，我们会第一时间更正。
    </view>
    <view class="detailName">
      Q：小程序无法登录/定位不准/页面卡顿怎么办？
    </view>
    <view class="detail">
      A：请尝试以下操作：<br>
      检查手机网络连接。<br>
      清理微信缓存（路径：微信->我->设置->通用->存储空间->缓存）。<br>
      重启微信或手机。<br>
      将微信及手机系统升级至最新版本。
    </view>
    <view class="null"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0
    }
  },
  onLoad() {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #F4FAF7;
}

.null {
  width: 750rpx;
  height: 40rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img {
  width: 750rpx;
  height: 520rpx;
  position: absolute;
  top: 0;
}

.contentbox {
  width: 750rpx;
  position: relative;
  z-index: 999;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

.title {
  width: 670rpx;
  font-size: 48rpx;
  color: #1C274C;
  position: relative;
  margin-top: 10rpx;
}

.name {
  width: 670rpx;
  font-size: 40rpx;
  position: relative;
  margin-top: 40rpx;
}

.detailName {
  width: 670rpx;
  font-size: 34rpx;
  color: rgba(30, 30, 30, 0.75);
  position: relative;
  margin-top: 30rpx;
}

.detail {
  width: 670rpx;
  font-size: 28rpx;
  color: rgba(40, 40, 40, 0.6);
  position: relative;
  margin-top: 20rpx;
}
</style>
